<template>
  <div class="loginindex">
    <el-form
      class="login-from"
      ref="login-form"
      :model="user"
      :rules="formRules"
    >
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox class="right" v-model="user.agree" 
          >我已经阅读并同意获取权限</el-checkbox
        >
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :plain="true"
          v-loading="loginLoading"
          @click="onLogin"
          class="login-btn"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login } from "@/api/user.js";
export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        mobile: "13911111111",
        code: "246810",
        agree: false
      },
      loginLoading: false,
      //表单校验规则配置
      formRules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "change",
          },
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "change" },
          { pattern: /^\d{6}$/, message: "请输入正确的验证码格式" },
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error("请同意用户协议"));
              }
            },
           trigger: "change",
          },
        ],
      },
    };
  },
  coumputed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onLogin() {
      const user = this.user;
  //获取dom元素  //validate是elementui的一个表单验证方法  接受两个参数  valid布尔值  err
  this.$refs["login-form"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.login()
      });
    },
    login(){
      this.loginLoading = true;
      login(this.user).then((res) => {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          //登录成功之后 从后台获取到token 并且放入缓存
        //放入本地缓存
        window.localStorage.setItem('user',JSON.stringify(res.data.data))

          //跳转到首页方法 1
          // this.$router.push('/')
          //方法二
          this.$router.push({
            name:'home'
          })
          this.loginLoading = false;
        })
        .catch((err) => {
          this.$message.error("登录失败，手机号或密码错误");
          this.loginLoading = false;
        });
    }
  },
};
</script>
<style lang="less" scoped>
.loginindex {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-from {
    background-color: #fff;
    padding: 60px;
    min-width: 300px;
  }
  .login-btn {
    width: 100%;
  }
  .right {
    font-size: 20px;
  }
}
</style>
